<template>
	<view>
		<!-- 头部 -->
		 <uni-nav-bar background-color="#3286ed" :statusBar="true" :fixed='true' color="#fff" title="新增物流" left-icon="left" right-text="提交" @clickLeft="backFn" @clickRight="btnOkFn">        </uni-nav-bar>
	<u--form class="form" labelPosition="left" labelWidth="100px" :model="form" :rules="rules" ref="form">
		<u-form-item  label="租赁订单" prop="orderNo" borderBottom ref="item1" @click="openPop">
			<u--input :readonly="true" v-model="form.orderNo" border="none" placeholder="选择租赁订单"></u--input>
						<u-icon @click="openPop" slot="right" name="arrow-right"></u-icon>
		</u-form-item>
		<u-form-item  label="仓库名" prop="warehouseName" borderBottom ref="item1">
			<u--input :readonly="true" v-model="form.warehouseName" border="none" placeholder="仓库名"></u--input>
						<!-- <u-icon slot="right" name="arrow-right"></u-icon> -->
		</u-form-item>
		<u-form-item @click="typeShow=true"  label="出入库类型" prop="type" borderBottom ref="item1">
			<u--input :readonly="true" v-model="form.type" border="none" placeholder="出入库类型"></u--input>
			<u-icon slot="right" name="arrow-right"></u-icon>
		</u-form-item>
		<u-form-item  label="项目名称" prop="projectName" borderBottom ref="item1">
			<u--input :readonly="true" v-model="form.projectName" border="none" placeholder="项目名称"></u--input>
						<!-- <u-icon slot="right" name="arrow-right"></u-icon> -->
		</u-form-item>
		<u-form-item  label="目的地" prop="projectAddress" borderBottom ref="item1">
			<u--input :readonly="true" v-model="form.projectAddress" border="none" placeholder="目的地"></u--input>
						<!-- <u-icon slot="right" name="arrow-right"></u-icon> -->
		</u-form-item>
		<u-form-item @click="logisticsShow=true"  label="运输方式" prop="logisticsType" borderBottom ref="item1">
			<u--input :readonly="true" v-model="form.logisticsType" border="none" placeholder="选择运输方式"></u--input>
			<u-icon slot="right" name="arrow-right"></u-icon>
		</u-form-item>
		<u-form-item  label="司机名称" prop="driverName" borderBottom ref="item1">
			<u--input v-model="form.driverName" border="none" placeholder="请输入司机名称"></u--input>
						<!-- <u-icon slot="right" name="arrow-right"></u-icon> -->
		</u-form-item>
		<u-form-item  label="司机联系方式" prop="driverTel" borderBottom ref="item1">
			<u--input v-model="form.driverTel" border="none" placeholder="司机联系方式"></u--input>
						<!-- <u-icon slot="right" name="arrow-right"></u-icon> -->
		</u-form-item>
		<u-form-item  label="车辆信息" prop="vehicleInformation" borderBottom ref="item1">
			<u--input v-model="form.vehicleInformation" border="none" placeholder="车辆信息"></u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
		</u-form-item>
		<u-form-item  label="识别信息" prop="serialNumber" borderBottom ref="item1">
			<u--input v-model="form.serialNumber" border="none" placeholder="若是第一次出库物流则为数字1,以此类推"></u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
		</u-form-item>
		<u-form-item  label="物流费用" prop="logisticsExpenses" borderBottom ref="item1">
			<u--input v-model="form.logisticsExpenses" border="none" placeholder="物流费用"></u--input>
						<!-- <u-icon slot="right" name="arrow-right"></u-icon> -->
		</u-form-item>
		<u-form-item @click="arrivalDateShow=true"  label="到货日期" prop="arrivalDate" borderBottom ref="item1">
			<u--input readonly v-model="form.arrivalDate" border="none" placeholder="到货日期"></u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
		</u-form-item>
		 
	</u--form>
	<!-- 租赁订单选择框 -->
	<u-popup :show="show"  mode="right" customStyle="margin-top:44px" overlayStyle="margin-top:44px"  :closeOnClickOverlay="true" @close="show=false">
		<u--form class="orderForm" :model="orderForm" labelWidth="70px" >
			<u-form-item label="项目名:" prop="projectName"  >
				<u--input   border="surround" clearable v-model="orderForm.projectName"   placeholder='项目名'></u--input>
			<!-- <u-icon slot="right" name="arrow-right"></u-icon> -->
			</u-form-item>
			<u-form-item label="客户名:" prop="customerName" >
				<u--input     clearable v-model="orderForm.customerName"   border="surround" placeholder='客户名'></u--input>
			<!-- <u-icon slot="right" name="arrow-right"></u-icon> -->
			</u-form-item>
			<u-form-item label="订单状态:" prop="orderStatus" @click='orderStatusShow=true'>
				<u--input     clearable v-model="orderType"  rendly disabledColor="#ffffff" border="bottom" placeholder='订单状态'>
				</u--input>
			<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>
			<u-button  type='success'  style="width: 140px;"  text="查询" @click="Seacrch"></u-button>
		</u--form>
		<view class="table" v-for="item in orderList" :key="item.id">
			 <view>订单编号:<span class="text">{{item.orderNo}}</span></view>
			 <view>项目名:<span class="text">{{item.projectName}}</span></view>
			 <view>客户名:<span class="text">{{item.customerName}}</span> </view>
			 <view>订单状态:<span class='text'>{{item.orderStatus}}</span></view>
			 <view>创建时间:<span class="text">{{item.createTime}}</span> </view>
			 <u-button type="success" size="mini" class="button" @click="checked(item)">选择</u-button>
		</view>
	</u-popup>
	<!-- 订单状态 -->
	<u-picker :closeOnClickOverlay="true" @close="orderStatusShow=false" @cancel="orderStatusShow=false" @confirm="confirm" :show="orderStatusShow" :columns="OrderOptions" keyName="dictLabel"></u-picker>
	<u-picker :closeOnClickOverlay="true" @close="logisticsShow=false" @cancel="logisticsShow=false" @confirm="logisticsConfirm" :show="logisticsShow" :columns="LogisticsOptions" keyName="dictLabel"></u-picker>
	<u-picker :closeOnClickOverlay="true" @close="typeShow=false" @cancel="typeShow=false" @confirm="typeConfirm" :show="typeShow" :columns="typeOptions" keyName="dictLabel"></u-picker>
	<!-- 提示框 -->
		<u-modal showConfirmButton showCancelButton @confirm="BtnModel" width='250px'  @cancel="BtnShow=false" :show="BtnShow" title="提示" >
				<view class="slot-content">
					<rich-text nodes="是否确认提交?"></rich-text>
				</view>
		</u-modal>
		<u-toast ref="uToast"></u-toast>
		<u-datetime-picker :closeOnClickOverlay="true" @close="arrivalDateShow=false"
		    :show="arrivalDateShow" v-model="dateNow" @confirm="arrivalDateConfirm"
		    @cancel="arrivalDateShow=false" mode="date"></u-datetime-picker>
	</view>
</template>

<script>
	import {getDicts} from '@/api/dictionary/index.js'
	import {listOrder}from '@/api/order/order.js'
	import {addLogisticsApi} from '@/api/logistics.js'
	export default {
		 

		data() {
			return {
				form:{ 
				   orderId:'',
				   orderProperty:'1',
				   logisticsExpenses:'',
				   projectName:'',
				   orderNo:'',
				   projectAddress:'',
				   shippingType:'',
				   driverName:'',
				   driverTel:'',
				   vehicleInformation:'',
				   logisticsStatus:'',
				   warehouseName:'',
				   outboundNo:'',
				   returnApplyNo:'',
				   type:'',
				   logisticsType:'',
				   arrivalDate:''
				},
				rules:{
					orderNo:[{required:true,message:'请选择租赁订单',trigger:'blur'}],
					projectName:[{required:true,message:'请填写项目名',trigger:'blur'}],
					projectAddress:[{required:true,message:'请填写地址',trigger:'blur'}],
					driverName:[{required:true,message:'请填写司机名称',trigger:'blur'}],
					driverTel:[{required:true,message:'请填写司机联系方式',trigger:'blur'},{ validator: (rule, value, callback) => {
		        if (value === '') {
		        callback(new Error('请输入电话号码'))
		        }
		      if (value.length !== 11) {
		        callback(new Error('请输入正确电话号码'))
		      }
		      if (value.length !== 11) {
		        callback(new Error('请输入正确电话号码'))
		      }
		      // 验证电话号码手机号码，包含至今所有号段? ?
		      var ab = /^[1][3|4|5|6|7|8|9][0-9]{9}$/
		      if (ab.test(value) === false) {
		        callback(new Error('请输入正确电话号码'))
		      }
		      callback()
		    }, trigger: 'blur' }],
					// logisticsExpenses:[{required:true,message:'请填写物流费用',trigger:'blur'}],
					logisticsType:[{required:true,message:'请选择运输方式',trigger:'blur'}],
					type:[{required:true,message:'请选择出入库类型',trigger:'blur'}],
				},
				show:false,
				orderList:[],
				orderForm:{
					        projectName:'',
					        customerName:'',//客户名称
					        orderStatus:'7'
				},
				LogisticsOptions:[],
				logisticsShow:false,
				
				typeOptions:[],
				
				typeShow:false,
				OrderOptions:[],
				orderType:'发货中',
				orderStatusShow:false,//订单状态选择器
				BtnShow:false,//提示
				dateNow:'',//当前时间
				arrivalDateShow:false,//时间弹框
				
			};
		},
		onLoad() {
			this.getLogisticsList()
			this.gettypeOptions()
			this.getOrderOptions()
			 this.dateNow = this.getNowTime()
		},
		methods:{
			// 获取当前时间
			// 获取当前时间
			getNowTime() {
			    var date = new Date()
			    var month = date.getMonth() + 1;
			    var time = date.getFullYear() + "-" + month + "-" + date.getDate();
			    return time;
			},
			// 时间格式化
			getTime(val) {
			    var date = new Date(val);
			    var year = date.getFullYear(); //年 ,从 Date 对象以四位数字返回年份
			    var month = date.getMonth() + 1; //月 ,从 Date 对象返回月份 (0 ~ 11) ,date.getMonth()比实际月份少 1 个月
			    var day = date.getDate(); //日 ,从 Date 对象返回一个月中的某一天 (1 ~ 31)
			    //修改月份格式
			    if (month >= 1 && month <= 9) {
			        month = "0" + month;
			    }
			    //修改日期格式
			    if (day >= 0 && day <= 9) {
			        day = "0" + day;
			    }
			    var currentFormatDate = `${year}-${month}-${day}`;
			    return currentFormatDate
			},
			// 获取状态
			//获取物流运输方式
			    async getLogisticsList(){
			      let res=await getDicts('biz_shipping_type')
			      this.LogisticsOptions.push(res.data)
			    },
				logisticsConfirm(val){
					this.logisticsShow=false
					this.form.shippingType=val.value[0].dictValue
					this.form.logisticsType=val.value[0].dictLabel
				},
			    //出入库类型
			    async gettypeOptions(){
			      let res=await getDicts('out_return_type')
			      this.typeOptions.push(res.data)
			    },
				typeConfirm(val){
					this.typeShow=false
					this.form.shippingType=val.value[0].dictValue
					this.form.type=val.value[0].dictLabel
				},
			    //获取租赁订单状态
			    async getOrderOptions(){
			      let res=await getDicts('order_type')
			      this.OrderOptions.push(res.data)
			    },
			// 打开弹框
			async openPop(){
				this.show=true
				let res=await listOrder(this.orderForm)
				res.rows.forEach(item=>{
					item.orderStatus=this.getValue(...this.OrderOptions,item.orderStatus)
				})
				this.orderList=res.rows
			},
			async Seacrch(){
				let res=await listOrder(this.orderForm)
				res.rows.forEach(item=>{
					item.orderStatus=this.getValue(...this.OrderOptions,item.orderStatus)
				})
				this.orderList=res.rows
			},
			getValue(arr, item) {
			      for (let i = 0; i < arr.length; i++) {
			        if (item === arr[i].dictValue) {
			          return arr[i].dictLabel
			        }
			      }
			    },
				confirm(val){
					console.log(val);
					this.orderStatusShow=false
					this.orderForm.orderStatus=val.value[0].dictValue
					this.orderType=val.value[0].dictLabel
					console.log(this.orderForm.orderStatus);
				},
				// 实际到货时间
				arrivalDateConfirm(e) {
				    console.log(e);
				    this.form.arrivalDate = this.getTime(e.value)
				    this.arrivalDateShow = false
				},
				checked(val){
					console.log(val);
					this.form.orderNo=val.orderNo
					this.form.orderId=val.id
					this.form.warehouseName=val.deliveryWarehouseName
					this.form.projectAddress=val.address
					this.form.projectName=val.projectName
					this.show=false
				},
			// 提交按钮
			async btnOkFn(){
				try{
					  this.$refs.form.validate().then(async(res)=>{
						  if(res){
							  this.BtnShow=true
						  }
					  })
					
				}catch(error){
					 console.log(error);
				}
			},
			async BtnModel(){
				
				await addLogisticsApi(this.form)
				this.BtnShow=false
				this.$refs.uToast.show({
					type:'success',
					message:"操作成功",
					complete(){
						uni.redirectTo({
							url:'/pages/logistics/index'
						})
					}
				})
				
			},
			
			// 返回上一级
			backFn(){
				uni.navigateBack({delta:1})
			}
		}
	}
</script>

<style lang="scss">
 .form{
	   background-color: #fff;
	   padding-left: 10px;
	   padding-right: 10px;
   }
   .orderForm{
	   margin-left: 8px;
	   margin-right: 8px;
   }
   .table{
	   position: relative;
	   border: 1px solid #ccc;
	   margin: 5px;
	   padding-left: 5px;
	   .button{
		   width: 50px;
		   position: absolute;
		   bottom: 10px;
		   right: 10px;
	   }
	   .text{
		   
		font-size: 14px;
		   color: #969696;
	   }
   }
  
</style>
